<template>
    <div class="bg">
    <div class="Tkcontent">
    <h2 class="h3">裁判报名</h2>
        <!-- <el-dialog title="裁判员报名" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false"> -->
            <el-form class="TKform" :model="ruleForm" :rules="rules"  ref="judgeForm"  label-position="left" size="medium"
           >
   
                <el-form-item prop="raceName" label="赛事名称:">
                    <el-input v-model="raceName" readonly autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="姓名:">
                    <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="avatar" label="证件照（免冠正装,竖版小二寸）:">
                    <!-- <el-upload action="http://localhost:9090/file/upload" ref="img" :on-success="handleImgUploadSuccess">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload> -->
                    <imgUpload  :transfer="getmsg"></imgUpload>
                </el-form-item>
                <el-form-item prop="sex" label="性别:">
                    <el-select v-model="ruleForm.sex" placeholder="请选择性别" style="width:100%">
                        <el-option v-for="item in sex"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="idcard" label="身份证号:">
                    <el-input v-model="ruleForm.idcard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机:">
                    <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
                </el-form-item>
              
                <el-form-item prop="representUnit" label="代表单位:">
                    <el-input v-model="ruleForm.representUnit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="workUnit" label="工作单位:">
                    <el-input v-model="ruleForm.workUnit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="judgeLevel" label="现裁判等级:">
                    <el-select v-model="ruleForm.judgeLevel" placeholder="请选择裁判等级" style="width:100%">
                        <el-option v-for="item in levels"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="passDate" label="现等级通过时间:">
                    <el-date-picker v-model="ruleForm.passDate" type="date" value-format="yyyy-MM-dd"
                                    placeholder="选择日期" style="width:100%"></el-date-picker>
                </el-form-item>
                <el-form-item prop="latestRecord" label="备注:">
                    <el-input v-model="ruleForm.latestRecord" autocomplete="off"></el-input>
                </el-form-item>
                
            </el-form>
            <div class="TKfooter">
                <!--            <el-button @click="dialogFormVisible = false">取 消</el-button>-->
                <el-button type="danger" @click="save" size="medium">确 定</el-button>
            </div>
        <!-- </el-dialog> -->

    </div>
</div>
</template>
<script>
import imgUpload from '../components/imgUpload.vue'
    export default {
        name: "JudgeLink",
        data() {
            return {
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 10,
                name: "",
                form: {},
                dialogFormVisible: true,
                multipleSelection: [],
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                ruleForm: {
                    name: '',
                    sex: '',
                    idcard: '',
                    phone: '',
                    representUnit: '',
                    workUnit: '',
                    passDate: '',
                    latestRecord: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    idcard: [
                        {required: true, message: '请输入身份证号', trigger: 'blur'},
                        {
                            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确'
                        }
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'}
                    ],
                    representUnit: [
                        {required: true, message: '请输入代表单位', trigger: 'blur'}
                    ],
                    workUnit: [
                        {required: true, message: '请输入工作单位', trigger: 'blur'}
                    ],
                    judgeLevel: [
                        {required: true, message: '请选择裁判等级', trigger: 'change'}
                    ],
                    passDate: [
                        {required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    latestRecord: [
                        {required: true, message: '最近执裁或复训活动名称及地点', trigger: 'blur'}
                    ]
                },
                levels: [
                    {value: '0', label: '国际级'},
                    {value: '1', label: '国家级'},
                    {value: '2', label: '预备国家级'}
                    // {value: '3', label: '二级'},
                    // {value: '4', label: '三级'}
                ],
                sex: [
                    {value: '0', label: '男'},
                    {value: '1', label: '女'},
                ],
                raceId: this.$route.query.raceId,
                raceName:this.$route.query.raceName,
                imgData:null
            }
        },
        created() {
            this.load()
        },
        components:{imgUpload},
        methods: {
            getmsg(img){
                console.log(img)
                  this.imgData=img
                },
            load() {
                const data = {
                    "page": this.pageNum,
                    "pageSize": this.pageSize,
                    "name": this.name
                }
                this.request.post("/judge/page", data).then(res => {
                    //this.tableData = res.data.records
                    this.tableData = res.data.data
                    this.total = res.data.total
                })
            },
            save() {
               var that=this
                 
        
                    this.$refs['judgeForm'].validate((valid) => {
                    if (valid) {  // 表单校验合法
                        if(!this.imgData){
                            that.$message.error("请上传头像！")
                            return
                        }
                       let formData = new FormData();
                       formData.append('file', this.imgData, this.ruleForm.idcard+'.png');
                        that.request.post("/file/upload", formData).then(res => {
                        console.log(res)
                           if(res.code==200){
                            that.ruleForm.avatar=res.data.imgUrl
                            that.ruleForm.raceId = that.raceId
                           that.request.post("/judge/save", that.ruleForm).then(res => {
                            if (res.code === 200) {
                                that.$message.success("报名成功，请等待审核！")
                                that.$refs['judgeForm'].resetFields()
                                // this.dialogFormVisible = false
                                // this.load()
                            } else {
                                that.$message.error(res.message)
                            }
                        })
                           }
              
                            
                       })

                  

             
                    }
                });
               
               
            },
            handleAdd() {
                this.dialogFormVisible = true
                this.form = {}
                this.$nextTick(() => {
                    if (this.$refs.img) {
                        this.$refs.img.clearFiles();
                    }
                    if (this.$refs.file) {
                        this.$refs.file.clearFiles();
                    }
                })
            },
            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    if (this.$refs.img) {
                        this.$refs.img.clearFiles();
                    }
                    if (this.$refs.file) {
                        this.$refs.file.clearFiles();
                    }
                })
            },
            del(id) {
                this.request.delete("/judge/" + id).then(res => {
                    if (res.code === 200) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            delBatch() {
                if (!this.multipleSelection.length) {
                    this.$message.error("请选择需要删除的数据")
                    return
                }
                let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
                this.request.post("/judge/del/batch", ids).then(res => {
                    if (res.code === 200) {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            reset() {
                this.name = ""
                this.load()
            },
            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            },
            handleFileUploadSuccess(res) {
                this.form.file = res
            },
            handleImgUploadSuccess(res) {
                this.form.img = res
            },
            download(url) {
                window.open(url)
            },
            exp() {
                window.open("http://localhost:9090/judge/export")
            },
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            }
        }
    }
</script>
<style >

.bg{
    width:100%;
    height:100vh;
    overflow-y: auto;
    background:#f5f5f5;
    background:url("../assets/imgs/p2.png");
    background-size: 100% 100%;
}
.el-form-item{
    width:100%;
    display: flex;
    flex-direction: column;
}
.el-form-item__label{
    width:100%;
    color:#fff;
    font-weight: bold;
}
    .el-dialog {
        margin-top: 4vh;
    }
    .h3{
            text-align: center;
            color:#F56C6C;
        }
    .Tkcontent{
        width:1000px;
        margin:40px auto;

        background:rgb(45,39,19,0.9);
        /* padding:50px 0; */
       padding:50px 0;
    }
    .TKfooter{
        text-align: center;
    }
    .TKfooter .el-button{
      width:calc(100% - 100px);
    }
    .TKform{
        width:100%;
        padding:20px 50px;
    }
    @media (max-width: 768px){
        body{
    background:#fff;
}
        .Tkcontent{
            width:100%;
            margin:0;
            padding:20px 0;

        }
        .TKform{
        width:100%;
        padding:20px;
    }
    .TKfooter .el-button{
      width:calc(100% - 40px);
    }
    }
</style>